<template>
	<view>
		<!-- <image class="bg" :src="info.data?.image || ''" mode=""></image> -->
		
		<u-swiper :list="info.data.other_images" :autoplay="false" height='1221rpx'>
			<view slot="indicator" class="indicator">
				<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
					:class="[index === current && 'indicator__dot--active']">
				</view>
			</view>
		</u-swiper>
		
		<view class="info">
			<view class="infoTitle">
				{{info.data?.sn}}{{info.data?.name || ''}}
			</view>
			
			<view class="infoTips">
				{{info.data?.spec?.first}} X {{info.data?.spec?.second}} X {{info.data?.spec?.three}}
			</view>
		</view>
		
		
		<view class="dbox" >
			<view class="dboxTop">
				<view class="dboxTopItem">
					{{info.data?.name}}
				</view>
				<view class="dboxTopItem">
					{{info.data?.alias_name}}
				</view>
				<view class="dboxTopItem">
					{{info.data?.stock}}
				</view>
			</view>
			
			<view class="dboxbox">
				<view class="dboxboxItem">
					产品名称
				</view>
				<view class="dboxboxItem">
					产品属性
				</view>
				<view class="dboxboxItem">
					产品总库存
				</view>
			</view>
		</view>
		
		
		<view class="tab" v-if="false">
			
			<view class="tabTitle">
				<view class="tabTitleTop">
					编号
				</view>
				<view class="tabTitleTop">
					色号
				</view>
				<view class="tabTitleTop">
					仓库
				</view>
				<view class="tabTitleTop">
					库存(片）
				</view>
			</view>
			
			<view class="tabBox">
				<view class="tabBoxTop">
					编号
				</view>
				<view class="tabBoxTop">
					色号
				</view>
				<view class="tabBoxTop">
					仓库
				</view>
				<view class="tabBoxTop">
					库存(片）
				</view>
			</view>
		</view>
		
		<view class="detail">
			商品详情
		</view>
		
		<!-- <u-parse :content="info.data.package_scheme"></u-parse> -->
		<view class="">
			<view class="title">
				元素图
			</view>
			<view class="tips">
				ELEMENT DIAGRAM
			</view>
		</view>
		<image style="width: 100%;" :src="info.data.design_image" mode="widthFix"></image>
		<view class="">
			<view class="title">
				元素图
			</view>
			<view class="tips">
				ELEMENT DIAGRAM
			</view>
		</view>
		<image style="width: 100%;" mode="widthFix"  :src="info.data.image"></image>
		
		
		
		
		
		<button class="xbutton" open-type="share">
					<image class="fanhui" src="../../static/image/img/fanhui.png" mode=""></image>
				</button>
		
		<image class="shouye" @click="home()" src="../../static/image/img/shouye.png" mode=""></image>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import searchs from '@/components/search/searchs.vue'
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		searchdetail
	} from '../../network/home.js'
	
	
	
	let info = reactive({
		id:'',
		data:null
	})
	
	onLoad((data) =>{
		info.id = data.id
		getDetail()
	})
	
	const getDetail = () =>{
		searchdetail({
			id:info.id
		}).then(res=>{
			console.log(res);
			info.data = res.data
		})
	}
	const home = () =>{
		uni.reLaunch({
			url:"/pages/index/index"
		})
	}
	
</script>

<style lang="scss" scoped>
.bg{
	width: 100%;
	height: 1221rpx;
	// background-color: #000;
}

.info{
	padding: 30rpx;
	box-sizing: border-box;
	background-color: #fff;
	border-bottom: 1rpx solid #EEEEEE;
}

.infoTitle{
	font-weight: bold;
	font-size: 36rpx;
	color: #333333;
}

.infoTips{
	font-weight: 500;
	font-size: 28rpx;
	color: #999999;
	padding: 32rpx 0;
}

.detail {
	padding: 36rpx 30rpx 57rpx;
}

.fanhui {
	position: fixed;
	
	width: 90rpx;
	height: 90rpx;
	bottom: 200rpx;
	right: 39rpx;
	
}
.shouye {
	position: fixed;
	
	width: 90rpx;
	height: 90rpx;
	bottom: 80rpx;
	right: 39rpx;
}

.dbox {
	width: 690rpx;
	height: 200rpx;
	background: #F5F5F5;
	border-radius: 16rpx;
	margin: auto;
}

.dboxTop {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	padding-top: 62rpx;
	
}

.dboxTopItem {
	font-weight: bold;
	font-size: 26rpx;
	color: #333333;
	padding: 0 27rpx;
	box-sizing: border-box;
	border-right: 1rpx solid #CCCCCC;
	text-align: center;
	&:last-child {
		border: none;
	}
}

.dboxbox {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	margin-top: 32rpx;
}

.dboxboxItem{
	font-weight: 500;
	font-size: 24rpx;
	padding: 0 27rpx;
	text-align: center;
}

.tab{
	margin-top: 30rpx;
}

.tabTitle{
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	margin: auto;
	width: 690rpx;
	height: 80rpx;
	background: #F5F5F5;
	border-radius: 16rpx 16rpx 0rpx 0rpx;
}

.tabTitleTop {
	font-weight: bold;
	font-size: 26rpx;
	color: #333333;
	text-align: center;
	line-height: 80rpx;
}

.tabBox{
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	width: 690rpx;
	margin: auto;
}

.tabBoxTop {
	border: 1rpx solid #CCCCCC;
	
	font-weight: 500;
	font-size: 24rpx;
	color: #666666;
	text-align: center;
	line-height: 80rpx;
}

.title{
	font-weight: 400;
	font-size: 44rpx;
	color: #333333;
	text-align: center;
	
}

.tips {
	font-weight: 400;
	font-size: 44rpx;
	color: #333333;
	text-align: center;
}
</style>
